<script setup lang='ts'>
import { useIndexStore } from '@/stores/index'
const indexStore = useIndexStore()
const ispc = indexStore.ispc

const vrList = [
    { id: 'mitem1', title: '面套开发区', ani_name: 'animate__fadeInUp', vrUrl: 'https://www.720yun.com/vr/111j5psaza0?s=18508549', mimg: new URL('../../assets/img/l10.png', import.meta.url).href },
    { id: 'mitem2', title: '功能检验区', ani_name: 'animate__fadeInUp', vrUrl: 'https://www.720yun.com/vr/111j5psaza0?s=18508550', mimg: new URL('../../assets/img/l10.png', import.meta.url).href },
    { id: 'mitem3', title: '发泡试制区', ani_name: 'animate__fadeInUp', vrUrl: 'https://www.720yun.com/vr/111j5psaza0?s=18508551', mimg: new URL('../../assets/img/l10.png', import.meta.url).href },
    { id: 'mitem4', title: '自动物流线2', ani_name: 'animate__fadeInRight', vrUrl: 'https://www.720yun.com/vr/111j5psaza0?s=18508557', mimg: new URL('../../assets/img/l4.png', import.meta.url).href },
    { id: 'mitem5', title: '自动物流线1', ani_name: 'animate__fadeInRight', vrUrl: 'https://www.720yun.com/vr/111j5psaza0?s=18508558', mimg: new URL('../../assets/img/l4.png', import.meta.url).href },
    { id: 'mitem6', title: '零部件加工区', ani_name: 'animate__fadeInUp', vrUrl: 'https://www.720yun.com/vr/111j5psaza0?s=18511415', mimg: new URL('../../assets/img/l11.png', import.meta.url).href },
    { id: 'mitem7', title: '综合区', ani_name: 'animate__fadeInUp', vrUrl: 'https://www.720yun.com/vr/111j5psaza0?s=18508546', mimg: new URL('../../assets/img/l5.png', import.meta.url).href },
    { id: 'mitem8', title: '智能制造区', ani_name: 'animate__fadeInUp', vrUrl: 'https://www.720yun.com/vr/111j5psaza0?s=18508553', mimg: new URL('../../assets/img/l12.png', import.meta.url).href },
    { id: 'mitem9', title: '共享讨论区', ani_name: 'animate__fadeInUp', vrUrl: 'https://www.720yun.com/vr/111j5psaza0?s=18508556', mimg: new URL('../../assets/img/l13.png', import.meta.url).href },
]
</script>

<template>
    <div class="map_vr box bg3 clmcenter">
        <img src="@/assets/img/logo.png" class="logo" alt="logo">
        <img src="@/assets/img/back.png" class="btn_goback" @click="$router.replace('/cn/main')">
        <div class="container clmstart">
            <div class="stitle">
                <img src="@/assets/img/title_left.png" class="title_left anileft" />
                <p>VR参观区域分布图</p>
                <img src="@/assets/img/title_right.png" class="title_right aniright" />
            </div>
            <div class="mapbox" :style="{ marginTop: ispc ? '' : '6vw' }">
                <img src="@/assets/img/cn/hui1.png" class="hui1">
                <div :class="['mitem', item.id]" v-for="(item, index) in vrList" :key="item.id"
                    @click="$router.replace({ path: '/cn/vr', query: { url: item.vrUrl } })">
                    <img :src="item.mimg" class="mimg" v-if="index >= 3">
                    <div :class="['mtitlebox animate__animated ', item.ani_name]">
                        <p class="mtitle">{{ item.title }}</p>
                    </div>
                    <img :src="item.mimg" class="mimg" v-if="index < 3">
                </div>
                <img src="@/assets/img/cn/hui2.png" class="hui2" />
            </div>
        </div>
    </div>
</template>
<style lang="scss">
.stitle {
    position: relative;
    height: 3.33vw;
    display: flex;
    justify-content: center;
    align-items: center;
    p {
        background: url('@/assets/img/titlebg.png') no-repeat;
        background-size: 100% 100%;
        color: #0b4167;
        font-size: 1.875vw;
        line-height: 3.33vw;
        text-align: center;
        letter-spacing: 0.3vw;
        // text-transform: uppercase;
        padding: 0 1.3vw;
    }
    .title_left,
    .title_right {
        position: absolute;
        width: 2.96875vw;
    }
    .title_left {
        left: -3vw;
    }
    .title_right {
        right: -3vw;
    }
}
</style>
<style lang="scss" scoped>
.map_vr {
    .container {
        position: relative;
        width: 100%;
        .mapbox {
            position: relative;
            width: 82.45vw;
            height: 20.83vw;
            margin-top: 10vw;
            margin-bottom: 5.83vw;
            background: url('@/assets/img/map.png') no-repeat;
            background-size: 100% 100%;
            .hui1 {
                position: absolute;
                left: 5.42vw;
                top: -6.77vw;
                width: 15.57vw;
            }
            .hui2 {
                position: absolute;
                top: -2.86vw;
                right: -0.625vw;
                width: 6.04vw;
            }
            .mitem {
                position: absolute;
                .mtitlebox {
                    cursor: pointer;
                    transition: all 0.5s linear;
                    .mtitle {
                        font-size: 1.33vw;
                        color: #ffffff;
                        text-align: center;
                        line-height: 1.8;
                    }
                }
                .mtitlebox:hover {
                    transform: scale(1.1);
                }
                .mimg {
                    position: relative;
                    z-index: 2;
                }
            }
            .mitem1,
            .mitem2,
            .mitem3, .mitem6, .mitem7, .mitem8 {
                top: -4.583vw;
                .mtitlebox {
                    width: 11.09vw;
                    height: 2.5vw;
                    background: url('@/assets/img/cn/b5.png') no-repeat;
                    background-size: 100% 100%;
                }
                .mimg {
                    width: 0.73vw;
                    margin-left: 1.67vw;
                    margin-top: -0.6vw;
                }
            }
            .mitem1 {
                left: 21.45vw;
            }
            .mitem2 {
                left: 33.02vw;
            }
            .mitem3 {
                left: 44.32vw;
            }
            .mitem4,
            .mitem5 {
                display: flex;
                justify-content: center;
                align-items: center;
                .mtitlebox {
                    width: 11.09vw;
                    height: 2.5vw;
                    background: url('@/assets/img/cn/b5.png') no-repeat;
                    background-size: 100% 100%;
                    margin-left: -1vw;
                }
                .mimg {
                    width: 3.85vw;
                    height: 0.73vw;
                }
            }
            .mitem4 {
                top: 8vw;
                left: 36.6vw;
            }
            .mitem5 {
                top: 9.4vw;
                left: 53vw;
            }
            .mitem6,
            .mitem7,
            .mitem8 {
                .mtitlebox {
                    margin-top: -0.65vw;
                }
                .mimg {
                    width: 0.73vw;
                }
            }
            .mitem6 {
                top: 14.48vw;
                left: 11.35vw;
                .mimg {
                    margin-left: 0.78vw;
                }
            }
            .mitem7 {
                top: 15vw;
                left: 26.51vw;
                .mimg {
                    margin-left: 1.82vw;
                }
            }
            .mitem8 {
                top: 15.73vw;
                left: 52.19vw;
                .mimg {
                    margin-left: 1.04vw;
                }
            }
            .mitem9 {
                top: 5.83vw;
                right: -3.23vw;
                display: flex;
                .mtitlebox {
                    width: 3.18vw;
                    height: 11.09vw;
                    background: url('@/assets/img/cn/b7.png') no-repeat;
                    background-size: 100% 100%;
                    margin-left: -0.9vw;
                    .mtitle {
                        display: flex;
                        align-items: center;
                        width: 80%;
                        height: 100%;
                        line-height: 1.1;
                        text-align: center;
                        word-break: break-all;
                        margin-left: 14%;
                    }
                }
                .mimg {
                    width: 4.84vw;
                    height: 0.73vw;
                    margin-top: 8.3vw;
                }
            }
        }
    }
}
</style>